<template>
  <div id="add-schedule">
    <form v-on:submit="addschedules">
      <label class="alert alert-info" role="alert">日程内容</label>
      <textarea v-model="schedule.body"></textarea>
      <label class="alert alert-info" role="alert">日程紧急度</label>
      <select v-model="schedule.degree" class="btn">
        <option value="紧急">紧急</option>
        <option value="重要">重要</option>
        <option value="不紧急不重要">不紧急不重要</option>
      </select>
      <label class="alert alert-info" role="alert">日程时间</label>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="schedule.value1"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <button type="submit" class="btn btn-primary">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'AddSchedule',
  data () {
    return {
      schedule: {
        title: '',
        value1: '',
        type: ''
      }
    }
  },
  methods: {
    addschedules (e) {
      e.preventDefault()
      let newschedule = {
        body: this.schedule.body,
        degree: this.schedule.degree,
        time: this.schedule.value1
      }
      this.$http.post('http://localhost:3000/schedule', newschedule)
        .then((response) => {
          console.log(response)
          this.$router.push({path: '/Schedule/Center', query: {alert: '日记添加成功!'}})
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #add-schedule *{
    box-sizing: border-box;
  }

  #add-schedule{
    margin: 0 auto;
    max-width: 600px;
    padding: 10px;
  }

  label{
    display: block;
    margin: 10px 0 10px;
  }

  input[type="text"],textarea{
    display: block;
    width: 100%;
    padding: 8px;
    border: mediumaquamarine 1px solid;
  }
  select{
    background: white;
    border: mediumaquamarine 1px solid;
  }

  textarea{
    height: 150px;
  }

  #checkboxes label{
    display: inline-block;
    margin-top: 0;
  }

  #checkboxes input{
    display: inline-block;
    margin-right: 10px;
  }
  .btn{
    margin-top: 10px;
  }

  button{
    display: block;
    height: 40px;
    width: 100%;
    margin-top: 18px;
    background: #66cdaa;
    color: #fff;
    border: 0;
    border-radius: 18px;
    font-size: 16px;
    cursor: pointer;
  }
  .demonstration{
    margin-top: 20px;
  }
  .choose_date{
    margin-top: 10px;
  }
</style>
